<template>
  <div class="container">
    <el-container>
      <el-aside
        :class="border ? 'large-area' : 'large-area'"
        :width="asideWidth + 'px'"
        v-if="AShow"
      >
        <div v-if="leftTitle" class="title">
          <div>{{ leftTitle ? leftTitle : "左标题" }}</div>
        </div>
        <slot name="aside">左边内容</slot>
      </el-aside>
      <el-container style="padding: 0" :class="border ? '' : 'large-area'">
        <div v-if="rightTitleShow">
          <div class="title">右标题</div>
          <el-divider></el-divider>
        </div>
        <el-header
          :class="border ? 'large-area' : ''"
          :style="{ 'margin-bottom': border ? '10px' : '0' }"
          :height="headerHeight + 'px'"
        >
          <slot name="header">头部</slot>
        </el-header>
        <div :class="border ? 'large-area' : ''" style="flex: 1">
          <el-main
            :style="{
              paddingTop: border ? '20px' : '0px',
              height: FShow ? '88%' : '100%',
            }"
          >
            <slot name="main">主要部分</slot>
          </el-main>
          <el-footer :height="footerHeight + 'px'" v-if="FShow">
            <slot name="footer">底部</slot>
          </el-footer>
        </div>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "AHMF",
  data() {
    return {};
  },
  props: {
    //是否展示边框
    border: {
      type: Boolean,
      default: false,
    },
    //Aside是否展示
    AShow: {
      type: Boolean,
      default: false,
    },
    //Footer是否展示
    FShow: {
      type: Boolean,
      default: true,
    },
    //Aside宽度
    asideWidth: {
      type: Number,
      default: 200,
    },
    //header高度
    headerHeight: {
      type: String,
      default: "auto",
    },
    //footer高度
    footerHeight: {
      type: Number,
      default: 50,
    },
    //左标题是否展示
    leftTitle: {
      type: String,
      default: "",
    },
    //右标题是否展示
    rightTitleShow: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style scoped>
.large-area {
  border: 1px solid #ebeef5; /* 浅色边框 */
  border-radius: 4px; /* 圆角 */
  background-color: #fff; /* 背景颜色 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
.container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-container {
  height: 100%;
  padding: 15px;
}

.el-header,
.el-footer {
  color: #333;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-header {
  padding: 10px;
  justify-content: flex-start;
}
.el-aside {
  color: #333;
  text-align: center;
  padding: 0 0 15px 0;
  margin-right: 10px;
}

.el-main {
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 88%;
}

body > .el-container {
  margin-bottom: 40px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  background-color: #3c9cff;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: center;
}
.el-divider--horizontal {
  margin: 12px 0;
}
</style>
